import { Input } from '@mui/material';
import { styled } from '@mui/material/styles';
import { Box } from '@mui/system';
import { useRef } from 'react';
import { useGetThemeStateStore } from '../../../stores/theme';

interface Props {
    onClickApply: Function;
    placeholder?: string;
}

const baseStyle = {
    color: 'white',
    borderRadius: '8px',
    minWidth: 300,
    height: 40,
    fontSize: '1rem',
    // background: '#13112A',
    border: 'solid 1px transparent',
    // backgroundImage:
    //     'linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #0CD3E3 -1.18%, #FF007A 97.17%)',
    // backgroundOrigin: 'border-box',
    // backgroundClip: 'content-box, border-box',
    // boxShadow: '2px 1000px 1px #13112A inset',
    padding: '0 16px',
    '&::before, &::after': {
        borderBottom: 'none !important'
    }
};

const StyledInput = styled(Input)(() => ({
    ...baseStyle,
    textTransform: 'none',
    '&.MuiInputBase-root': {
        '&:hover': {}
    }
}));

export const Search = ({ onClickApply, placeholder }: Props) => {
    const inputEl = useRef<any>(null);
    const {mode,isLight,setMode,color1,bgColor,bgColor1,bgColor0,txtColor,txtColor3} = useGetThemeStateStore();

    const keyPress = (e) => {
        if (e.key === 'Enter') {
            onSearch();
        } else if (e.key === 'Escape') {
            onClear();
        }
    };

    const onSearch = () => {
        if (inputEl && inputEl.current) {
            const value = inputEl.current.value;
            onClickApply(value);
        }
    };

    const onClear = () => {
        if (inputEl && inputEl.current) {
            inputEl.current.value = '';
        }
        onClickApply('');
    };

    return (
        <StyledInput
            placeholder={placeholder || 'Search'}
            inputRef={inputEl}
            onKeyDown={keyPress}
            startAdornment={
                <Box
                    component={'img'}
                    src='/icon_tool_search.svg'
                    sx={{
                        width:11,
                        mr:'10px'
                    }}
                />
            }
            sx={{
                background:bgColor+' !important',
                "& .MuiInputBase-input":{
                    color:'#8689C9 !important',
                    fontFamily: 'Rubik',
                    fontWeight: 400,
                    fontSize: '12px',
                    lineHeight: '130%',
                }
            }}
        />
    );
};
